<template>
    <div class="spgl">
        <div class="title">
            订单管理
            <div class="backPath" @click="backPath">
                <i class="el-icon-arrow-left"></i>
                返回商家中心
            </div>
        </div>
        <div class="content">
            <div class="tabs">
                <div class="tab" :class="{ 'tab-avatat': selectStatus == '' }" @click="clickStatus('')">
                    全部
                </div>
                <div class="tab" :class="{ 'tab-avatat': selectStatus == '0' }" @click="clickStatus('0')">
                    待支付
                </div>
                <div class="tab" :class="{ 'tab-avatat': selectStatus == '1' }" @click="clickStatus('1')">
                    服务中
                </div>
                <div class="tab" :class="{ 'tab-avatat': selectStatus == '2' }" @click="clickStatus('2')">
                    已完成
                </div>
            </div>
            <div class="search flex-center-1">
                <el-input v-model="input" class="search-input" placeholder="请输入订单编号"></el-input>
                <el-button class="search-submit" type="warning" @click="getService_order">搜索</el-button>
            </div>

            <el-table class="table" :data="tableData" stripe>
                <el-table-column label="订单详情">
                    <template slot-scope="scope">
                        <div class="time-no">
                            {{ scope.row.createtime_text }}
                            <span>{{ scope.row.order_no }}</span>
                            <span class="lxmj" @click="openKefu(scope.row)"><i
                                    class="el-icon-chat-dot-square"></i>联系买家</span>
                        </div>
                        <div v-if="scope.row.shopinfo" class="flex flex-start">
                            <img :src="scope.row.shopinfo.pic.split(',')[0]" class="table-logo" alt="" />
                            <span class="table-name">
                                {{ scope.row.shopinfo.name }}
                            </span>
                        </div>
                        <div v-else></div>
                    </template>
                </el-table-column>
                <el-table-column label="金额" width="150">
                    <template slot-scope="scope">
                        <div class="money">
                            <span v-show="isEditMoney != scope.row.id">
                                {{ scope.row.money }}
                            </span>
                            <el-input-number v-show="isEditMoney == scope.row.id" v-model="editMoney"
                                controls-position="right" size="mini"></el-input-number>
                            <div v-if="scope.row.status == 0" @click="changEditMoney(scope.row)">
                                <i v-show="isEditMoney != scope.row.id" class="el-icon-edit"></i>
                                {{
                                    isEditMoney == scope.row.id
                                        ? "确认"
                                        : "编辑"
                                }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单状态" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0" class="order-type colorfa5151">
                            待支付
                        </div>
                        <div v-if="scope.row.status == 1" class="order-type color48bc46">
                            已支付
                        </div>
                        <div v-if="scope.row.status == 2" class="order-type color999999">
                            已完成(未确认)
                        </div>
                        <div v-if="scope.row.status == 3" class="order-type color999999">
                            已确认(未评价)
                        </div>
                        <div v-if="scope.row.status == 4" class="order-type color999999">
                            已确认(已评价)
                        </div>
                        <div v-if="scope.row.status == 5" class="order-type color999999">
                            已取消
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" class="overflowauto">
                    <template slot-scope="scope">
                        <div class="cz">
                            <el-button v-if="scope.row.status != 1" round size="mini" @click="goDetail(scope.row)">
                                查看详情
                            </el-button>
                            <el-button v-else round size="mini" type="success" plain
                                @click="changEditStatus(scope.row)">
                                我已完成
                            </el-button>
                            <div @click="
                                clone(
                                    '/service/shoporder?orderNo=' +
                                    scope.row.order_no
                                )
                                ">
                                <i class="el-icon-document-copy"></i>
                                复制链接
                            </div>
                            <!-- <i
                v-if="scope.row.status == 4 || scope.row.status == 5"
                class="el-icon-delete dle"
                @click="delorder(scope.row)"
              ></i> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit"
                    :current-page.sync="page" @current-change="changePage">
                </el-pagination>
            </div>
        </div>
        <div id="copycode" class="copycode">{{ cloneText }}</div>
    </div>
</template>

<script>
import {
    getService_order,
    getService_order_edit,
    delorder,
} from "@/assets/api/service";
import axios from "axios";
import { getTime } from "@/assets/utils/utils";
export default {
    name: "OrderManage",
    components: {},
    data() {
        return {
            selectStatus: "",
            tableData: [],

            isEditMoney: "",
            editMoney: 0,
            cloneText: "",

            environment: "http://dev-pc.xiaozhucaishui.com:9999",
            input: "",
            getTime: getTime,

            page: 1,
            limit: 10,
            total: 0,
        };
    },
    beforeDestroy() { },
    beforeMount() { },
    created() {
        // console.log(this.$route.query.selectStatus, "挂载之前的操作");
        if (this.$route.query.selectStatus !== undefined) {
            this.selectStatus = this.$route.query.selectStatus;
        } else {
            this.selectStatus = "";
        }
    },
    mounted() {
        this.getService_order();
    },
    computed: {},
    watch: {},
    methods: {
        /*
         * 获取服务商订单列表
         * 状态 0：待支付 1：已支付 2：已完成，未确认 3：已确认（未评价） 4：已确认（已评价）5：已取消
         */
        async getService_order() {
            let params = {
                page: this.page,
                pageSize: this.limit,
            };
            if (this.selectStatus) params.status = this.selectStatus;
            if (this.input) params.order_no = this.input;

            const res = await getService_order(params);
            if (res.code == 1) {
                this.tableData = res.data.orderlist;
                this.total = res.data.orderlistcount;
            }
        },

        // 修改分页
        changePage(page) {
            // console.log(page)
            this.page = page;
            this.getService_order();
        },

        clickStatus(status) {
            if (this.selectStatus == status) return;
            this.page = 1;
            this.selectStatus = status;
            this.getService_order();
        },

        async changEditMoney(item) {
            if (this.isEditMoney == item.id) {
                if (item.money == this.editMoney) {
                    this.isEditMoney = "";
                    return;
                }
                // 点击确认编辑
                const res = await getService_order_edit({
                    order_id: item.id,
                    money: this.editMoney,
                });
                if (res.code == 1) {
                    this.$message({
                        message: "修改成功",
                        type: "success",
                    });
                    this.isEditMoney = "";
                    item.money = this.editMoney;
                }
            } else {
                this.isEditMoney = item.id;
                this.editMoney = item.money;
            }
        },

        async changEditStatus(item) {
            // 点击我已完成
            const res = await getService_order_edit({
                order_id: item.id,
                status: 2,
            });
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.getService_order();
            }
        },

        goDetail(item) {
            if (item.status == 5) {
                this.$message.warning("该订单已取消");
                return;
            }
            this.$router.push({
                path: "/service/shoporder",
                query: {
                    orderNo: item.order_no,
                },
            });
        },

        // 复制
        clone(text) {
            let cloneText = window.location.host + text;
            if (window.location.href.startsWith("http://"))
                cloneText = "http://" + cloneText;
            if (window.location.href.startsWith("https://"))
                cloneText = "https://" + cloneText;
            this.cloneText = cloneText;
            this.$nextTick(() => {
                const range = document.createRange();
                range.selectNode(document.getElementById("copycode")); //获取复制内容的 id 选择器
                const selection = window.getSelection(); //创建 selection对象
                if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区
                selection.addRange(range); //将range对象添加到selection选区当中，会高亮文本块
                document.execCommand("copy"); //复制选中的文字到剪贴板
                selection.removeRange(range); // 移除选中的元素
            });
        },

        async delorder(item) {
            const res = await delorder({
                order_id: item.id,
            });
            if (res.code == 1) {
                this.$message({
                    message: "删除成功",
                    type: "success",
                });
                this.getService_order();
            }
        },

        // 打开客服
        openKefu(item) {
            const token = window.localStorage.getItem("token");
            if (!token) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$alert(item.username, '联系电话', {
                confirmButtonText: '确定',
                callback: action => {

                }
            });
            // localStorage.setItem("to_zim_userid", item.user_id);
            // this.$router.push({
            //     path: "/service/servicechat",
            // });
        },
        backPath() {
            this.$router.push({
                path: "/service/servicecenter/Index",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.spgl {
    background-color: #fff;
}

.title {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #eaeaea;
    font-size: 18px;
    color: #333333;
    padding: 0 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.time-no {
    display: flex;
    font-size: 12px;
    color: #999999;
    padding-left: 30px;
    padding-bottom: 16px;

    span {
        padding-left: 30px;
    }

    .lxmj {
        cursor: pointer;
        display: flex;
        align-items: center;
    }
}

.content {
    padding: 26px 40px;
}

.tabs {
    display: flex;
    align-items: center;

    .tab {
        width: 110px;
        height: 40px;
        line-height: 40px;
        background: #f1f1f1;
        border-radius: 4px;
        font-size: 14px;
        color: #333333;
        text-align: center;
        margin-right: 23px;
        cursor: pointer;
    }

    .tab-avatat {
        background-color: #e5f2ff;
        color: #0073ee;
    }
}

.search {
    padding: 26px 0;

    .search-input {
        width: 256px;
        margin-right: 10px;
    }

    .search-submit {}
}

.table {
    width: 100%;
    border: 1px solid rgb(235, 238, 245);

    ::v-deep .el-table__row {
        &:hover {
            .dle {
                display: block;
            }
        }
    }

    .table-logo {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        display: block;
        margin-right: 20px;
        padding-left: 30px;
    }

    .table-name {
        font-size: 14px;
        color: #333333;
        line-height: 20px;
    }

    .order-type {
        font-size: 14px;
        color: #fa5151;
    }

    .money,
    .order-type {
        text-align: center;
    }

    .money {
        div {
            cursor: pointer;

            &:hover {
                color: #ff6900;
            }
        }
    }

    ::v-deep .cell {
        overflow: visible;
    }

    .cz {
        text-align: center;
        position: relative;

        div {
            text-align: center;
            font-size: 14px;
            color: #333333;
            line-height: 24px;
            padding-top: 8px;
            cursor: pointer;

            &:hover {
                color: #1c87f3;
            }
        }

        .dle {
            position: absolute;
            top: -32px;
            right: 15px;
            cursor: pointer;
            display: none;
        }
    }
}

::v-deep .el-table th.el-table__cell>.cell {
    text-align: center;
}

::v-deep .el-table th.el-table__cell {
    background-color: #eaeaea;
}

::v-deep .el-table .el-table__cell {
    padding: 20px 0;
}

.backPath {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    cursor: pointer;

    i {
        padding-left: 5px;
    }

    &:hover {
        opacity: 0.8;
    }
}

.el-icon-chat-dot-square {
    font-size: 18px;
    color: #0073ee;
}

.flex-start {
    align-items: flex-start;
}

.colorfa5151 {
    color: #fa5151;
}

.color48bc46 {
    color: #48bc46;
}

.color999999 {
    color: #999999;
}

.overflowauto {
    overflow: auto;
}

.pagination {
    text-align: center;
    padding-top: 30px;
}

.copycode {
    opacity: 0;
    height: 0;
}
</style>